hanye-website/pages/products/[id].vue

<template>
  <div>
    <div class="w-full h-[55px] sm:h-[72px]"></div>
    <ErrorBoundary :error="error">
      <div v-if="isLoading" class="flex justify-center py-12">
        <!-- 加载中 -->
        <div
          class="animate-spin h-8 w-8 border-4 border-blue-500 rounded-full border-t-transparent"
        ></div>
      </div>

      <div v-else>
        <!-- 面包屑导航 -->
        <div class="max-w-full mb-6 xl:px-2 lg:px-2 md:px-4 px-4 mt-6">
          <div class="max-w-screen-2xl mx-auto">
            <nuxt-link
              to="/"
              class="justify-start text-white/60 text-base font-normal"
              >ホーム</nuxt-link
            >
            <span class="text-white/60 text-base font-normal px-2"> / </span>
            <nuxt-link to="/products" class="text-white/60 text-base font-normal"
              >製品一覧</nuxt-link
            >
            <span class="text-white/60 text-base font-normal px-2"> / </span>
            <span class="text-white text-base font-normal">{{ product?.name }}</span>
          </div>
        </div>

        <!-- 产品详情内容 -->
        <div class="max-w-full mb-12 md:mb-20 lg:mb-32 xl:px-2 lg:px-2 md:px-4 px-4">
          <div class="max-w-screen-2xl mx-auto">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-16">
              <!-- 左侧产品图片 -->
              <div class="flex flex-col gap-6">
                <!-- 主图展示 -->
                <div 
                  class="bg-zinc-900 rounded-lg p-8 relative overflow-hidden group aspect-square"
                >
                  <!-- 加载状态 -->
                  <div v-if="isImageLoading" class="absolute inset-0 flex items-center justify-center bg-zinc-800/50 z-10">
                    <div class="animate-spin h-8 w-8 border-4 border-blue-500 rounded-full border-t-transparent"></div>
                  </div>
                  
                  <!-- 主图容器 -->
                  <div class="relative w-full h-full">
                    <!-- 当前图片 -->
                    <img
                      :src="currentImage"
                      :alt="product?.name"
                      class="absolute inset-0 w-full h-full object-contain rounded-lg transition-all duration-500"
                      :class="{ 
                        'opacity-0': isImageLoading,
                        'opacity-100': !isImageLoading
                      }"
                      @load="handleImageLoad"
                      @error="handleImageError"
                    />
                    
                    <!-- 预加载图片 -->
                    <img
                      v-if="preloadImage"
                      :src="preloadImage"
                      class="absolute inset-0 w-full h-full object-contain rounded-lg opacity-0"
                      @load="handlePreloadComplete"
                    />
                  </div>
                  
                  <!-- 错误提示 -->
                  <div 
                    v-if="imageError"
                    class="absolute inset-0 flex items-center justify-center bg-red-900/50 z-20"
                  >
                    <div class="flex flex-col items-center gap-2">
                      <span class="text-white">画像の読み込みに失敗しました</span>
                      <button 
                        @click.stop="retryLoadImage"
                        class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors duration-300"
                      >
                        再試行
                      </button>
                    </div>
                  </div>
                </div>

                <!-- 缩略图列表 -->
                <div class="flex gap-4 overflow-x-auto pb-2 scrollbar-hide">
                  <div
                    v-for="(image, index) in [product?.image, ...(product?.gallery || [])]"
                    :key="index"
                    @click="changeImage(image)"
                    class="flex-shrink-0 w-20 h-20 cursor-pointer rounded-lg transition-all duration-300 relative group aspect-square p-0.5"
                    :class="{
                      'bg-gradient-to-r from-blue-500 to-blue-600': currentImage === image,
                      'hover:bg-gradient-to-r hover:from-blue-500/50 hover:to-blue-600/50': currentImage !== image,
                      'opacity-50': isThumbnailLoading[index] || thumbnailErrors[index]
                    }"
                  >
                    <!-- 缩略图加载状态 -->
                    <div v-if="isThumbnailLoading[index]" class="absolute inset-0 flex items-center justify-center bg-zinc-800 rounded-lg">
                      <div class="animate-spin h-4 w-4 border-2 border-blue-500 rounded-full border-t-transparent"></div>
                    </div>
                    
                    <!-- 缩略图遮罩 -->
                    <div 
                      class="absolute inset-0 bg-black/0 transition-all duration-300 rounded-lg"
                      :class="{
                        'bg-black/30': currentImage === image,
                        'group-hover:bg-black/20': currentImage !== image
                      }"
                    ></div>
                    
                    <img
                      :src="image"
                      :alt="`${product?.name} - 画像 ${index + 1}`"
                      class="w-full h-full object-cover transition-all duration-300 rounded-lg"
                      :class="{
                        'opacity-0': isThumbnailLoading[index],
                        'opacity-100': !isThumbnailLoading[index],
                        'group-hover:scale-110': currentImage !== image
                      }"
                      @load="handleThumbnailLoad(index)"
                      @error="handleThumbnailError(index)"
                    />
                    
                    <!-- 选中标记 -->
                    <div 
                      v-if="currentImage === image"
                      class="absolute top-1 right-1 w-4 h-4 bg-blue-500 rounded-full flex items-center justify-center"
                    >
                      <div class="w-2 h-2 bg-white rounded-full"></div>
                    </div>
                    
                    <!-- 缩略图错误提示 -->
                    <div 
                      v-if="thumbnailErrors[index]"
                      class="absolute inset-0 flex items-center justify-center bg-red-900/50 rounded-lg"
                    >
                      <div class="flex flex-col items-center gap-1">
                        <span class="text-white text-xs">エラー</span>
                        <button 
                          @click.stop="retryLoadThumbnail(index)"
                          class="px-2 py-1 bg-blue-500 text-white text-xs rounded hover:bg-blue-600 transition-colors duration-300"
                        >
                          再試行
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 右侧产品信息 -->
              <div class="flex flex-col gap-8">
                <!-- 产品名称 -->
                <div class="bg-zinc-900 rounded-lg p-6">
                  <h1 class="text-white text-3xl font-medium mb-4">
                    {{ product?.name }}
                  </h1>
                  <div class="text-stone-400 text-lg leading-relaxed">
                    {{ product?.description }}
                  </div>
                </div>

                <!-- 产品参数 -->
                <div class="bg-zinc-900 rounded-lg p-6">
                  <h2 class="text-white text-xl font-medium mb-6">製品仕様</h2>
                  <div class="grid grid-cols-1 gap-4">
                    <div class="flex justify-between items-center py-2 border-b border-zinc-800">
                      <span class="text-stone-400">カテゴリー</span>
                      <span class="text-white font-medium">{{ product?.category }}</span>
                    </div>
                    <div class="flex justify-between items-center py-2 border-b border-zinc-800">
                      <span class="text-stone-400">用途</span>
                      <span class="text-white font-medium">{{ product?.usage }}</span>
                    </div>
                    <div class="flex justify-between items-center py-2">
                      <span class="text-stone-400">容量</span>
                      <span class="text-white font-medium">{{ product?.capacities.join(" / ") }}</span>
                    </div>
                  </div>
                </div>

                <!-- 产品描述 -->
                <div class="bg-zinc-900 rounded-lg p-6">
                  <h2 class="text-white text-xl font-medium mb-6">製品説明</h2>
                  <div class="text-stone-400 leading-relaxed space-y-4">
                    <p>{{ product?.description }}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </ErrorBoundary>
  </div>
</template>

<script setup lang="ts">
/**
 * 产品详情页面
 * 展示产品主图、参数和描述
 */
import { useErrorHandler } from "~/composables/useErrorHandler";

// 产品接口定义
interface Product {
  id: number;
  name: string;
  category: string;
  usage: string;
  capacities: string[];
  image: string;
  description: string;
  gallery?: string[]; // 添加相册图片数组
}

const { error, isLoading, wrapAsync } = useErrorHandler();
const route = useRoute();
const product = ref<Product | null>(null);
const currentImage = ref<string>("");
const isImageLoading = ref(true);
const isThumbnailLoading = ref<boolean[]>([]);
const imageError = ref(false);
const thumbnailErrors = ref<boolean[]>([]);
const preloadImage = ref<string | null>(null);

/**
 * 加载产品详情
 */
async function loadProduct() {
  await wrapAsync(async () => {
    const id = route.params.id;
    const response = await $fetch<Product>(`/api/products/${id}`);
    product.value = response;
    currentImage.value = response.image;
    return response;
  });
}

/**
 * 预加载下一张图片
 */
function preloadNextImage(image: string) {
  preloadImage.value = image;
}

/**
 * 处理预加载完成
 */
function handlePreloadComplete() {
  preloadImage.value = null;
}

/**
 * 处理图片加载完成
 */
function handleImageLoad() {
  isImageLoading.value = false;
  imageError.value = false;
}

/**
 * 处理图片加载错误
 */
function handleImageError() {
  isImageLoading.value = false;
  imageError.value = true;
}

/**
 * 重试加载图片
 */
function retryLoadImage() {
  isImageLoading.value = true;
  imageError.value = false;
  // 强制重新加载图片
  const img = new Image();
  img.src = currentImage.value;
  img.onload = () => {
    handleImageLoad();
  };
  img.onerror = () => {
    handleImageError();
  };
}

/**
 * 重试加载缩略图
 */
function retryLoadThumbnail(index: number) {
  isThumbnailLoading.value[index] = true;
  thumbnailErrors.value[index] = false;
  // 强制重新加载缩略图
  const img = new Image();
  const images = [product.value?.image, ...(product.value?.gallery || [])];
  img.src = images[index] || '';
  img.onload = () => {
    handleThumbnailLoad(index);
  };
  img.onerror = () => {
    handleThumbnailError(index);
  };
}

/**
 * 处理缩略图加载完成
 */
function handleThumbnailLoad(index: number) {
  isThumbnailLoading.value[index] = false;
  thumbnailErrors.value[index] = false;
}

/**
 * 处理缩略图加载错误
 */
function handleThumbnailError(index: number) {
  isThumbnailLoading.value[index] = false;
  thumbnailErrors.value[index] = true;
}

/**
 * 切换图片
 */
function changeImage(image: string | undefined) {
  if (image && image !== currentImage.value) {
    isImageLoading.value = true;
    imageError.value = false;
    preloadNextImage(image);
    currentImage.value = image;
  }
}

// 页面加载时获取产品数据
onMounted(() => {
  loadProduct();
  // 初始化缩略图加载状态数组
  isThumbnailLoading.value = Array(4).fill(true);
  thumbnailErrors.value = Array(4).fill(false);
});

// SEO优化
useHead(() => ({
  title: `${product.value?.name || "产品详情"} - Hanye`,
  meta: [
    {
      name: "description",
      content: product.value?.description || "产品详情页面",
    },
  ],
}));
</script>

<style scoped>
/* 隐藏滚动条但保持滚动功能 */
.scrollbar-hide {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;  /* Chrome, Safari and Opera */
}

/* 图片过渡动画 */
.main-image {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 缩略图悬停效果 */
.thumbnail-item {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.thumbnail-item:hover {
  transform: translateY(-2px);
}

/* 缩略图选中效果 */
.thumbnail-item.selected {
  transform: scale(1.05);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* 产品信息卡片效果 */
.info-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.info-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
</style>